<template>
	<view class="search-act-page">
		<view class="top-box">
			<image class="back-ic" src="../../static/ic_back_grey.png" @click="goBack"></image>
			<view class="input-box">
				<image src="../../static/ic_search.png" class="search-ic"></image>
				<input 
					v-model="shopName"
					placeholder-class="font-999-28"
					class="font-333-28"
					placeholder="请输入店铺名称"
					maxlength="30"
					type="text"
					confirm-type="search"
					@confirm="handleSearch"
					@input="changeInputValue"
				/>
			</view>
		</view>
		<!--  搜索历史 -->
		<view class="column-container width-100p" v-if="!showSearchResult">
			<view class="history-top-box">
				<text class="font-333-28 font-weight-600">搜索历史</text>
				<text class="font-333-28" @click="showClearWindow = true">清空记录</text>
			</view>
			<view class="history-list-box">
				<text class="single-history-box" @click="clickHistoryItem(historyItem)"
				v-for="(historyItem , historyIndex) in historyList" :key="historyIndex">
					{{historyItem}}
				</text>
			</view>
		</view>
		
		<!-- 搜索结果 -->
		<view class="column-container" v-if="showSearchResult">
			<view class="search-top-box" v-if="dataList.length > 0">
				<text class="font-666-28">与搜索词</text>
				<text class="font-333-28 font-weight-600">“{{shopName}}”</text>
				<text class="font-666-28">相关的活动</text>
			</view>
			<view class="column-container width-100p" v-if="dataList.length > 0">
				<view class="data-item" v-for="(item , index) in dataList" :key="index" >
					<image src="../../static/ic_single_tag.png" class="single-tag"
					 v-if="item.checkNew == 1"></image>
					<view class="row-container width-100p mb-36">
						<view class="item-img-box">
							<image class="item-img" :src="item.logo"></image>
							<text class="brand-tag" v-if="item.checkBrand">品牌</text>
						</view>
						
						<view class="column-container-between height-190 width-100p">
							<view class="column-container">
								<text class="shop-name">{{item.shopName}}</text>
								<image :src="item.brandImg" class="brand-img" mode="heightFix"></image>
							</view>
							<text class="font-999-26">
							 距您：{{item.distanceStr}}</text>
						</view>
					</view>
					
					<view class="column-container width-100p" >
						<view class="act-item" v-for="(actItem , actIndex) in item.activeList"
						:key="actIndex" @click="gotoActDel(actItem , item.distanceStr)">
							<image class="act-bg" v-if="actItem.checkFar != 1 && actItem.checkStatus == 1 
							&& actItem.surplusCount == 1" src="../../static/bg_active_last.png"></image>
							<image class="act-bg" v-else-if="actItem.checkFar != 1 && actItem.checkStatus == 1
							&& actItem.surplusCount > 1" src="../../static/bg_active_last_yellow.png"></image>
							<image class="act-bg" v-else src="../../static/bg_active_grey.png"></image>
							
							<view class="row-container" style="z-index: 40;">
								<text class="font-333-22">{{actItem.startTime}}-{{actItem.endTime}}</text>
								<text class="red-tag" v-if="actItem.id" >满{{actItem.fullAmount}}奖{{actItem.returnAmount}}</text>
								<!-- <text class="red-tag" v-else>最高奖{{actItem.returnAmountBak}}</text> -->
								<text class="red-tag" style="padding: 0rpx 12rpx" v-else>返{{actItem.heightRate}}%</text>
								
								<text class="blue-tag" v-if="actItem.checkComment">无需评价</text>
								
							</view>
							
							<view class="row-container" style="z-index: 40;">
								<view class="column-container-center mr-30">
									<progress class="progress-bar" active-color="#CBCBCB"
									backgroundColor="#F0F0F0" v-if="actItem.checkFar == 1"
									:percent="(actItem.surplusCount / actItem.joinCount) * 100" 
									border-radius="5"></progress>
									
									<progress class="progress-bar" active-color="#CBCBCB"
									backgroundColor="#F0F0F0" v-else-if="actItem.checkFar != 1 && actItem.surplusCount == 0"
									:percent="(actItem.surplusCount / actItem.joinCount) * 100" 
									border-radius="5"></progress>
									
									<progress class="progress-bar" active-color="#FF5454"
									backgroundColor="#FFDADA" v-else-if="actItem.checkFar != 1 && actItem.surplusCount == 1"
									:percent="(actItem.surplusCount / actItem.joinCount) * 100" 
									border-radius="5"></progress>
									
									<progress class="progress-bar" active-color="#FFD100"
									backgroundColor="#FDEFBF" v-else
									:percent="(actItem.surplusCount / actItem.joinCount) * 100" 
									border-radius="5"></progress>
									
									<view class="row-container mt-12">
										<text class="font-ff5454-22 font-weight-600" v-if="actItem.surplusCount == 1">最后一席</text>
										<text class="font-999-22" v-else-if="actItem.surplusCount == 0">全部售罄</text>
										<text class="font-333-22 font-weight-600" v-else-if="actItem.surplusCount / actItem.joinCount > 0.2">剩余充足</text>
										<text class="font-333-22 font-weight-600" v-else>即将报满</text>
									</view>
								</view>
								
								<view class="buy-box">
									<image class="buy-bg" v-if="actItem.checkFar != 1 && actItem.checkStatus == 1
									&& actItem.surplusCount == 1" src="../../static/bg_buy_btn.png"></image>
									<image class="buy-bg" v-else-if="actItem.checkFar != 1 && actItem.checkStatus == 1
									&& actItem.surplusCount > 0" src="../../static/bg_buy_btn_yellow.png"></image>
									<image class="buy-bg" v-else-if="actItem.checkFar != 1" src="../../static/bg_buy_btn_grey.png"></image>
									
									<text class="font-333-24 font-weight-600 mr-16" 
									style="z-index: 40;"
									 v-if="actItem.checkFar == 1">距离过远</text>
									<text class="font-fff-24 font-weight-600 mr-28" style="z-index: 40;"
									v-if="actItem.checkFar != 1 && actItem.checkStatus == 1
									 && actItem.surplusCount == 1">报名</text>
									<text class="font-333-24 font-weight-600 mr-28" style="z-index: 40;"
									v-else-if="actItem.checkFar != 1 && actItem.checkStatus == 1
									&& actItem.surplusCount > 0">报名</text>
									<text class="font-666-24 mr-16" style="z-index: 40;"
									v-if="actItem.checkFar != 1 && actItem.checkStatus == 1 && actItem.surplusCount < 1">已售罄</text> 
									<text class="font-666-24 mr-16" style="z-index: 40;"
									v-if="actItem.checkFar != 1 && actItem.checkStatus == 0">未开始</text>
									<text class="font-666-24 mr-16" style="z-index: 40;"
									v-if="actItem.checkFar != 1 && actItem.checkStatus == 2">已结束</text>
									<text class="font-666-24 mr-16" style="z-index: 40;"
									v-if="actItem.checkFar != 1 && actItem.checkStatus == 3">已结算</text>
								</view>
							</view>
							
						</view>
					</view>
					
				</view>
			</view>
			
			<!-- 搜索无数据 -->
			<view class="column-container-row-center width-100p" v-else>
				<image class="no-result-img" src="../../static/ic_empty_list.png"></image>
				<view class="row-container">
					<text class="font-666-28">很抱歉，暂无与搜索词</text>
					<text class="font-333-28 font-weight-600">“{{shopName}}”</text>
					<text class="font-666-28">相关的活动</text>
				</view>
			</view>
		</view>
		
		<view class="clear-window" v-if="showClearWindow">
			<view class="clear-window-inner">
				<text class="font-333-32 font-weight-600 mt-44">确定清空历史搜索记录吗？</text>
				<view class="line-divider"></view>
				<view class="row-container width-100p" style="height: 96rpx;">
					<text class="btn" @click="showClearWindow = false">我再想想</text>
					<view class="vertical-line"></view>
					<text class="btn" style="font-weight: bold;color: #333333;background: #FFC01F;border-bottom-right-radius: 36rpx;"
					 @click="handleClearHistory">确定</text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopName:'',
				historyList:[],
				latitude:0.0 ,
				longitude:0.0,
				page:1,
				showSearchResult:false,
				dataList:[],
				showClearWindow:false,
				hasMoreData:false,
				startJuli:0,
				pagePvId:''
				
			}
		},
		
		onLoad() {
			this.latitude = this.cookie.get('jx_lat')
			this.longitude = this.cookie.get('jx_lng')
			let historyInfo = uni.getStorageSync("sp_history")
			if (historyInfo){
				this.historyList = historyInfo.split(',')
			}
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.pagePvId = ""
			this.startJuli = 0
			this.loadActivityList()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++
				this.loadActivityList()
			}
		},
		
		methods: {
			goBack(){
				let pages = getCurrentPages()
				if (pages.length <= 1){
					uni.switchTab({
						url:'/pages/index/index'
					})
				} else{
					uni.navigateBack()
				}
			},
			
			changeInputValue(e){
				if (!e.detail.value){
					this.showSearchResult = false
					this.dataList = []
					this.page = 1
				}
			},
			
			handleSearch(e){
				if (e.detail.value){
					this.shopName = e.detail.value
					if (this.historyList.findIndex((item => item == this.shopName)) == -1){
						this.historyList.push(this.shopName)
					}
					
					if (this.historyList.length > 10){
						this.historyList.splice(0 , 1)
					}
					
					uni.setStorageSync("sp_history" , this.historyList.join(','))
					this.page = 1
					this.loadActivityList()
					this.showSearchResult = true
				}
			},
			
			handleClearHistory(){
				this.historyList = []
				uni.setStorageSync("sp_history" , "")
				this.showClearWindow = false
			},
			
			clickHistoryItem(name){
				this.shopName = name
				this.page = 1
				this.loadActivityList()
				this.showSearchResult = true
			},
			
			//加载活动列表
			loadActivityList(){
				if (!this.shopName){
					uni.showToast({
						title:"请输入店铺名称",
						icon:'none'
					})
					return
				}
				
				let that = this
				this.http({
					url:'/common/active/new/activeList',
					method:'POST',
					data:{
						latitude : that.latitude,
						longitude : that.longitude,
						pageNo : that.page,
						pageSize : 10,
						shopName:that.shopName,
						startJuli:that.startJuli,
						pagePvId:that.pagePvId
					},
					success(res){
						if (res.code == 200){
							if (that.page == 1){
								that.dataList = res.data
							} else{
								that.dataList = [...that.dataList, ...res.data]
							}
							that.hasMoreData = res.data.length >= 10
							
							if (that.dataList.length > 0){
								that.startJuli = that.dataList[that.dataList.length - 1].distanceNum
								that.pagePvId = that.dataList[that.dataList.length - 1].pagePvId
							}
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			//进入活动详情  首先调用接口确认是否此活动已有订单
			gotoActDel(item , distanceStr){
				let nowTimeMills = new Date().getTime();
				if (this.clickTime > 0 && nowTimeMills - this.clickTime < 500){
					return
				}
				this.clickTime = nowTimeMills
				
				if (item.checkStatus == 2 || item.checkStatus == 3){ // 已结束已结算
					return 
				}
				if (item.surplusCount < 1){  // 已售罄
					return
				}
				
				if (item.id){
					if (item.checkFar == 1){ // 距离过远
						return
					}
					//type为2 跳转到好评返现的活动
					if (item.type == 2){
						uni.navigateTo({
							url:'/pages/index/commentActDel?actId=' + item.id
						})
					} else{
						uni.navigateTo({
							url:'/pages/index/activityDetail?actId=' + item.id
						})
					}
				} else{
					uni.navigateTo({
						url:'/pages/index/officialActDet?actData=' + encodeURIComponent(JSON.stringify(item)) 
						+ "&distanceStr=" + distanceStr
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.search-act-page{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		min-height: 100vh;
		position: relative;
		background: #F5F5F5;
	}
	
	.top-box{
		width: 100%;
		height: 88rpx;
		padding-top: 100rpx;
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: fixed;
		z-index: 100;
		
		.back-ic{
			width: 64rpx;
			height: 64rpx;
			margin-left: 22rpx;
			margin-right: 14rpx;
		}
		
		.input-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 364rpx;
			height: 60rpx;
			background: #F5F5F5;
			border-radius: 30rpx;
			border: #DDDDDD 2rpx solid;
			padding-left: 20rpx;
			padding-right: 20rpx;
			
			.search-ic{
				width: 22rpx;
				height: 22rpx;
				margin-right: 10rpx;
			}
		}
	}
	
	.history-top-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 60rpx);
		margin: 226rpx 30rpx 20rpx 30rpx;
	}
	
	.history-list-box{
		display: flex;
		flex-direction: row;
		width: calc(100% - 44rpx);
		margin-left: 22rpx;
		margin-right: 22rpx;
		flex-wrap: wrap;
		
		.single-history-box{
			padding: 11rpx 20rpx;
			font-size: 24rpx;
			color: #666666;
			background: white;
			border-radius: 4rpx;
			margin: 0rpx 8rpx 16rpx 8rpx;
			text-align: center;
		}
	}
	
	.search-top-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 60rpx);
		margin: 226rpx 30rpx 20rpx 30rpx;
	}
	
	.data-item{
		display: flex;
		flex-direction: column;
		width: calc(100% - 100rpx);
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: white;
		border-radius: 16rpx;
		position: relative;
		
		.single-tag{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 30;
		}
		
		.item-img-box{
			display: flex;
			flex-direction: row;
			width: 190rpx;
			height: 190rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
			position: relative;
			.item-img{
				width: 190rpx;
				height: 190rpx;
				border-radius: 10rpx;
				flex-shrink: 0;
			}
			.brand-tag{
				width: 56rpx;
				height: 32rpx;
				position: absolute;
				left: 0;
				top: 0;
				color: white;
				font-weight: 600;
				text-align: center;
				line-height: 32rpx;
				font-size: 20rpx;
				background: linear-gradient(90deg, #F83131 0%, #FF6D3F 100%);
				border-top-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				z-index: 10;
			}
		}
		
		.brand-img-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
		}
		
		.brand-img{
			width: auto;
			height: 38rpx ;
			margin-top: 8rpx;
			margin-right: 11rpx;
		}
		
		.shop-name{
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			max-width: 450rpx;
		}
		
		.progress-bar{
			width: 56rpx;
			height: 10rpx;
			border-radius: 10rpx;
		}
		
		
		.act-item{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 80rpx;
			margin-top: 24rpx;
			position: relative;
		
			.act-bg{
				width: 100%;
				height: 80rpx;
				position: absolute;
			}
			
			.buy-box{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				width: 119rpx;
				height: 80rpx;
				position: relative;
				
				.buy-bg{
					width: 100%;
					height: 100%;
					position: absolute;
				}
			}
			
			.red-tag{
				background: #FFF5ED;
				border: #FFD9C6 1rpx solid;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				padding: 0rpx 9rpx;
				color: #FF621F;
				font-weight: bold;
				font-size: 22rpx;
				border-radius: 8rpx;
				margin-left: 10rpx;
			}
			
			.blue-tag{
				background: #E6F9FF;
				border: #B1ECFF 1rpx solid;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				padding: 0rpx 9rpx;
				color: #4BA2E9;
				font-weight: bold;
				font-size: 22rpx;
				border-radius: 8rpx;
				margin-left: 10rpx;
			}
			
			.clock-ic{
				width: 20rpx;
				height: 20rpx;
				margin-right: 4rpx;
			}
		}
		
		.act-divider{
			width: 100%;
			height: 1rpx;
			background: #EEEEEE;
			margin: 20rpx 0rpx;
		}
		
		.shop-item{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border: #E9E9E9 1rpx solid;
			margin-top: 16rpx;
			border-radius: 10rpx;
			height: 80rpx;
			width: calc(100% - 40rpx);
			padding-left: 20rpx;
			padding-right: 20rpx;
			
			.shop-brand-ic{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			
			.enter-shop{
				padding: 5rpx 14rpx;
				font-size: 24rpx;
				color: #333333;
				font-weight: 600;
				background: #FFC01F;
				border-radius: 7rpx;
				text-align: center;
			}
			
		}
	}
	
	.no-result-img{
		width: 172rpx;
		height: 172rpx;
		margin-top: 476rpx;
		margin-bottom: 20rpx;
	}
	
	.clear-window{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100vh;
		z-index: 100;
		position: absolute;
		top: 0;
		flex: 1;
		
		.clear-window-inner{
			width: calc(100% - 148rpx);
			height: 230rpx;
			background: white;
			border-radius: 36rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.line-divider{
				width: 100%;
				height: 1rpx;
				background: #EEEEEE;
				margin-top: 44rpx;
			}
			
			.btn{
				width: 50%;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				font-size: 32rpx;
				color: #999999;
			}
			
			.vertical-line{
				width: 1rpx;
				height: 96rpx;
				background: #EEEEEE;
			}
		}
		
	}
	
</style>
